<template>
    <div id="guessindex">
        <div class="headinfo">
            <img src="//common-1253410441.file.myqcloud.com/activityimg/20180131094927.png" alt="">
            <span class="headleftbtn">
                <i class="myguess" @click="jumpfn('我的竞猜','/huodongland/myguess')"></i>
                <i class="beforeguess" @click="jumpfn('往期竞猜','/huodongland/guesshistry')"></i>
            </span>
            <span class="moneyshow">{{jackpot}}<b>元</b></span>
            <p class="datawin">上期：共{{historyWinJoinerCounts}}人猜中，每人分得奖金{{historyJoinerAvgWinMoney}}元</p>
            <span class="endtime">{{middletips}}</span>
            <img :src="homeLogo||'//common-1253410441.file.myqcloud.com/activityimg/20180202115731.png'"
                 class="leftteam teamimg"
                 alt="">
            <img :src="visitorLogo||'//common-1253410441.file.myqcloud.com/activityimg/20180202115731.png'"
                 class="rightteam teamimg"
                 alt="">
            <span class="leftteamname spantname">{{home}}</span>
            <span class="rightteamname spantname">{{visitor}}</span>
            <p class="selectfen">
                <span class="leftteamfen"
                      @click="selectfn(0)">{{hscore|seven}}</span>
                <span class="rightteamfen"
                      @click="selectfn(1)">{{vscore|seven}}</span>
                <template v-if="openselect">
                    <div :class="['selectmodal',tapindex===0?'h':'v']">
                        <ul>
                            <li v-for="(item,index) in scroes2"
                                @click="tapindex===0?hscore=item:vscore=item;openselect=false;">{{item}}
                            </li>
                        </ul>
                    </div>
                </template>
            </p>
        </div>
        <section class="middlecon">
            <template v-if="getState==='doing'">
                <img @click="openmodal" class="ensure"
                     src="//common-1253410441.file.myqcloud.com/activityimg/20180131114830.png" alt="">
            </template>
            <template v-if="getState==='over'">
                <img class="ensure"
                     src="//common-1253410441.file.myqcloud.com/activityimg/20180131114833.png" alt="">
            </template>
            <template v-if="getState==='win'">
                <img class="win"
                     src="//common-1253410441.file.myqcloud.com/activityimg/20180131114831.png" alt="">
            </template>
            <template v-if="getState==='hasget'">
                <img class="ensure"
                     src="//common-1253410441.file.myqcloud.com/activityimg/20180131114832.png" alt="">
            </template>
            <template v-if="getState==='lose'">
                <img class="win"
                     src="//common-1253410441.file.myqcloud.com/activityimg/20180201132841.png" alt="">
            </template>
        </section>
        <div class="intro">
            <template v-if="state===4">
                <section class="winlist">
                    <scroller
                            :on-refresh="refresh"
                            :on-infinite="infinite">
                        <ul class="clearfix">
                            <li v-for="(item,index) in awards" :key="index">
                                <img :src="item.avatar||'//common-1253410441.file.myqcloud.com/activityimg/20180202115731.png'"
                                     alt="">
                                <span>
                                <strong>{{item.nick}}</strong>
                                <em>中<b>{{item.wonMoney}}</b>元</em>
                            </span>
                            </li>
                        </ul>
                    </scroller>
                </section>
                <img src="//common-1253410441.file.myqcloud.com/activityimg/20180131151645.png" alt="">
            </template>
            <template v-else>
                <section class="introlist">
                    <span>猜比分活动是本站专为足球爱好者设定的竞猜比分游戏当场次出来时，在此页面上预测本场比分进行竞猜即可</span>
                    <p>1、参与竞猜需当天至少有一笔竞彩足球的出票订单</p>
                    <p>2、每个用户每期只可参与一次，一旦参与后不可更改。每参与一次奖金池增加0.1元。</p>
                    <p>3、当期场次比分(含伤停补时，不含加时和点球)结果出来时，猜中者平分奖金池。当期未猜中，奖金池计入下一期。</p>
                    <p>4、单期单用户最高中奖金额为100元，未用完奖金池累积到下一期。奖金池不足100元，当期补足到100元。</p>
                    <p>5、竞猜所中奖金以无门槛红包的形式发放给您。红包有有效期哦，请及时使用</p>
                    <p>6、此活动最终解释权归本站所有，与苹果公司无关</p>
                </section>
                <img src="//common-1253410441.file.myqcloud.com/activityimg/20180131094938.png" alt="">
            </template>
            <template v-if="showmodal">
                <div class="fixdiv">
                    <div class="con">
                        <section>
                            <i class="close" @click="showmodal=false"></i>
                            <div v-if="errorcode!==18013008">
                                <p v-if="errmsg">{{errmsg}}</p>
                                <p v-else>
                                    <span>您的竞猜比分为</span>
                                    <strong>{{home}}<b>{{hscore|seven}}:{{vscore|seven}}</b>{{visitor}}</strong>
                                </p>
                            </div>
                            <aside>
                                <button @click="showmodal=false"></button>
                                <button @click="emsurefn"></button>
                            </aside>
                        </section>
                        <img v-if="errorcode!==18013008"
                             src="//common-1253410441.file.myqcloud.com/activityimg/20180131154639.png" alt="">
                        <img v-else src="//common-1253410441.file.myqcloud.com/activityimg/20180202110235.png" alt="">
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    import {Marquee, MarqueeItem, Toast, Tab, TabItem, Sticky, dateFormat} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative, h5tonative} from '../../utils/otherfn';
    import {getGuessInfoR, sendGussR, winsortR} from '../../services/huodong/guess';
    import {namesource, jumptype} from '../../utils/config/common';
    import axios from 'axios';
    import {delay} from '../../utils/common';
    import {concat, head} from 'ramda';
    export default {
        components: {
            Marquee,
            MarqueeItem,
            Toast,
            Tab,
            TabItem,
            Sticky
        },
        data() {
            return {
                awards: [],
                winpage: 1,
                hscore: '--',
                vscore: '--',
                scroes: ['--', '0', '1', '2', '3', '4', '5', '6', '7+'],
                scroes2: ['0', '1', '2', '3', '4', '5', '6', '7+'],
                deadline: '',
                home: '',
                homeLogo: '',
                issueNo: '',
                jackpot: '',
                joinerAvgWinMoney: '',
                joinerCounts: '',
                joinerWinMoney: '',
                score: '',
                selfJoiner: '',
                state: '',
                visitor: '',
                visitorLogo: '',
                winJoinerCounts: '',
                showmodal: false,
                errmsg: '',
                historyWinJoinerCounts: '--',
                historyJoinerAvgWinMoney: '--',
                tapindex: 0,
                openselect: false,
                errorcode: 0
            };
        },
        created() {
            this.getinfo();
        },
        filters: {
            formatdata(val){
                return dateFormat(new Date(val), 'MM-DD HH:mm:ss')
            },
            seven(val){
                return val === '7' ? '7+' : val;
            }
        },
        computed: {
            getState(){
                const {state, selfJoiner}=this;
                if([1, 2, 3].indexOf(state) > -1 && selfJoiner) {
                    return 'hasget'
                }
                if(state === 1) {
                    return 'doing'
                }
                if([-2, 2, 3, 4].indexOf(state) > -1) {
                    if(selfJoiner) {
                        if(selfJoiner.state === 1) {
                            return 'win';
                        }
                        else {
                            return 'lose'
                        }
                    }
                }
                return 'over'
            },
            middletips(){
                const {state, score, deadline}=this;
                if(state === -2) {
                    return `赛果比分: 取消`
                }
                if(state === 4) {
                    return `赛果比分 ${score}`
                }
                return `${deadline} 截止竞猜`
            }
        },
        methods: {
            /**
             * 获取一些初始化信息
             */
            selectfn(index){
                if(this.getState === 'doing') {
                    this.tapindex = index;
                    this.openselect = true
                }
            },
            async jumpfn(name, url){
                if(url.indexOf('myguess') > -1) {
                    const {token}=await getMytoken(true);
                    if(!token) {
                        getLogintoken(function (value) {
                            console.log('vvv', value);
                            if(value) {
                                location.reload();
                            }
                        }).then(({token})=> {
                        });
                        return;
                    }
                }
                const jumpurl = `${location.origin}/tg/#${url}`;
                h5tonative(name, jumpurl, ()=> {
                    location.href = jumpurl;
                });
            },
            async getwinlist(page, loadermore){
                const {token}=await getMytoken(true);
                const {id}=this;
                const {data}=await winsortR(id, page);
                if(data && data.code === 0) {
                    if(loadermore) {
                        if(data.data.awards.length === 0) {
                            return true;
                        }
                        else {
                            this.awards = concat(this.awards, data.data.awards);
                        }
                    }
                    else {
                        this.winpage = 1;
                        this.awards = data.data.awards;
                    }
                }
            },
            async refresh(done){
                await delay(1000);
                this.winpage = 1;
                await this.getwinlist(1);
                done();
            },
            async infinite(done){
                await delay(1000);
                this.winpage = this.winpage + 1;
                const over = await this.getwinlist(this.winpage, true);
                if(over) {
                    this.winpage = this.winpage - 1;
                    done(true);
                    return;
                }
                done();
            },
            async getinfo(){
                const {token}=await getMytoken(true);
                const {data}=await getGuessInfoR(token);
                if(data && data.code === 0) {
                    const {
                            deadline,
                            home,
                            homeLogo,
                            issueNo,
                            jackpot,
                            joinerAvgWinMoney,
                            joinerCounts,
                            joinerWinMoney,
                            score,
                            selfJoiner,
                            state,
                            visitor,
                            visitorLogo,
                            winJoinerCount,
                            id,
                            historyWinJoinerCounts,
                            historyJoinerAvgWinMoney
                    }=data.data;
                    this.deadline = deadline;
                    this.home = home;
                    this.homeLogo = homeLogo;
                    this.issueNo = issueNo;
                    this.jackpot = jackpot;
                    this.joinerAvgWinMoney = joinerAvgWinMoney;
                    this.joinerCounts = joinerCounts;
                    this.joinerWinMoney = joinerWinMoney;
                    this.score = score;
                    this.selfJoiner = selfJoiner;
                    this.state = state;
                    this.visitor = visitor;
                    this.visitorLogo = visitorLogo;
                    this.winJoinerCount = winJoinerCount;
                    this.historyWinJoinerCounts = historyWinJoinerCounts;
                    this.historyJoinerAvgWinMoney = historyJoinerAvgWinMoney;

                    this.id = id;
                    if(state === 4) {
                        this.getwinlist(1);
                    }
                    if(selfJoiner && selfJoiner.score) {
                        const [hscore, vscore]=selfJoiner.score.split(":");
                        this.hscore = hscore;
                        this.vscore = vscore;
                    }
                }
            },
            async openmodal(){
                const {token}=await getMytoken(true);
                if(!token) {
                    getLogintoken(function (value) {
                        console.log('vvv', value);
                        if(value) {
                            location.reload();
                        }
                    }).then(({token})=> {
                    });
                    return;
                }
                const {hscore, vscore}=this;
                if(hscore !== '--' && vscore !== '--') {
                    this.showmodal = true;
                    this.errmsg = '';
                    return;
                }
                else {
                    this.$vux.toast.text('请选择比分');
                }
            },
            async emsurefn(){
                if(this.errmsg === '') {
                    this.sendmyguess()
                }
                else if(this.errorcode !== 18013008) {
                    this.showmodal = false;
                }
                else {
                    this.showmodal = false;
                    nativetonative(jumptype['1']);
                }
            },
            async sendmyguess(){
                const {token}=await getMytoken(true);
                if(!token) {
                    getLogintoken(function (value) {
                        console.log('vvv', value);
                        if(value) {
                            location.reload();
                        }
                    }).then(({token})=> {
                    });
                    return;
                }
                const {id, hscore, vscore}=this;
                const {data}=await sendGussR(token, {
                    id,
                    score: `${head(hscore)}:${head(vscore)}`
                });
                if(data && data.code === 0) {
                    this.showmodal = false;
                    this.errmsg = '';
                    this.getinfo();
                }
                else {
                    this.showmodal = true;
                    this.errmsg = data.msg;
                    this.errorcode = data.code;
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    #guessindex {
        img {
            display: block;
            width: 100%;
            background: #011927;
        }
        .headinfo {
            position: relative;
            img {
                display: block;
                width: 100%;
            }
            .headleftbtn {
                position: absolute;
                top: 0;
                right: 0;
                height: 55px;
                width: 330px;
                i {
                    width: 160px;
                    height: 55px;
                    display: inline-block;
                }
            }
            .moneyshow {
                color: #fcff00;
                font-size: 32px;
                position: absolute;
                top: 122px;
                left: 420px;
                font-weight: bold;
                b {
                    font-size: 20px;
                    color: #fff;
                    font-weight: bold;
                }
            }
            .datawin {
                position: absolute;
                font-size: 28px;
                text-align: center;
                top: 248px;
                color: #fff;
                font-weight: bold;
                width: 100%;
            }
            .endtime {
                position: absolute;
                font-size: 26px;
                color: #fff;
                width: 100%;
                top: 474px;
                font-weight: bold;
                text-align: center;
            }
            .selectfen {
                position: absolute;
                top: 380px;
                width: 366px;
                left: 50%;
                transform: translate(-50%, 0);
                span {
                    appearance: none;
                    width: 157px;
                    background: none;
                    display: inline-block;
                    box-sizing: border-box;
                    margin-left: 40px;
                    text-align: center;
                    font-size: 40px;
                    font-weight: bold;
                    &:first-child {
                        margin-left: 0;
                    }
                }
            }
            .spantname {
                font-size: 30px;
                font-weight: bold;
                color: #fff;
                line-height: 54px;
                position: absolute;
                width: 251px;
                top: 556px;

            }
            .leftteamname {
                left: 60px;
            }
            .rightteamname {
                right: 60px;
                text-align: right;
            }
            .teamimg {
                position: absolute;
                width: 90px;
                height: 90px;
                border-radius: 50%;
                top: 388px;
            }
            .leftteam {
                left: 68px;
            }
            .rightteam {
                right: 68px;
            }
        }
        .middlecon {
            height: 208px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #011927;
            .ensure {
                width: 382px;
            }
            .win {
                width: 100%;
                display: block;
            }
        }
        .intro {
            position: relative;
            .introlist {
                position: absolute;
                width: 679px;
                box-sizing: border-box;
                color: #fff;
                left: 50%;
                transform: translate(-50%, 0);
                font-size: 26px;
                padding: 0 34px;
                span {
                    display: block;
                    margin-top: 120px;
                    margin-bottom: 40px;
                }
                p {
                    display: block;
                    margin-bottom: 40px;
                }
            }
            .winlist {
                padding: 0 20px;
                position: absolute;
                width: 625px;
                top: 120px;
                left: 50%;
                transform: translate(-50%, 0);
                height: 80%;
                ul {
                    display: block;
                    overflow: scroll;
                    max-height: 880px;
                    li {
                        width: 300px;
                        height: 62px;
                        float: left;
                        display: flex;
                        background: #142a40;
                        border-radius: 8px;
                        margin-bottom: 20px;
                        align-items: center;
                        &:nth-child(2n) {
                            margin-left: 25px;
                        }
                        img {
                            width: 52px;
                            height: 52px;
                            box-sizing: border-box;
                            border: 2px solid #ccc;
                            border-radius: 50%;
                            margin: 0 10px;
                        }
                        span {
                            color: #fff;
                            strong {
                                display: block;
                                font-weight: bold;
                                font-size: 24px;
                                line-height: 1;
                            }
                            em {
                                line-height: 1;
                                display: block;
                                font-size: 20px;
                                b {
                                    color: #e3eb13;
                                }
                            }
                        }
                    }
                }
            }
        }
        .fixdiv {
            position: fixed;
            background: rgba(0, 0, 0, 0.6);
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            .con {
                position: relative;
                top: 20%;
                section {
                    position: absolute;
                    width: 680px;
                    left: 50%;
                    transform: translate(-50%, 0);
                    box-sizing: border-box;
                    height: 100%;
                    justify-content: center;
                    align-items: center;
                    display: flex;
                    .close {
                        position: absolute;
                        width: 80px;
                        height: 80px;
                        right: 0;
                        top: 0;
                    }
                    p {
                        font-size: 30px;
                        width: 550px;
                        color: #fff;
                        display: flex;
                        align-self: center;
                        margin-bottom: 60px;
                        flex-direction: column;
                        align-items: center;
                        span {
                            display: block;
                            margin-bottom: 30px;
                        }
                        b {
                            color: #fcff00;
                            margin: 0 40px;
                        }
                    }
                    aside {
                        position: absolute;
                        bottom: 36px;
                        width: 428px;
                        display: flex;
                        height: 70px;
                        left: 50%;
                        transform: translate(-50%, 0);
                        button {
                            flex: 1;
                            height: 100%;
                        }
                    }
                }
            }
        }

        .selectmodal {
            width: 322px;
            height: 244px;
            background: linear-gradient(to bottom, #edffff, #aebccb);
            border-radius: 8px;
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            top: 64px;
            &.h {
                left: 0;
            }
            &.v {
                left: 370px;
            }
            ul {
                li {
                    font-size: 32px;
                    display: inline-block;
                    width: 156px;
                    text-align: center;
                    font-weight: bold;
                    height: 61px;
                    line-height: 61px;
                }
            }
        }
    }
</style>